<template>
    <div class="container">
        <div class="search-content">
        <el-form :model="searchContent" ref="searchFrom" :inline="true">
            <el-form-item prop="name" label="电桩名称：">
                <el-input v-model="searchContent.name" placeholder="电桩名称" maxlength="32"></el-input>
            </el-form-item>
            <el-form-item label="添加时间：">
                <el-date-picker
                    v-model="selectTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间" 
                    end-placeholder="结束时间"
                    value-format="timestamp"
                    :default-time="['00:00:00', '23:59:59']"
                    format="yyyy-MM-dd"
                    @change="handleChangeTime"
                    >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="app_class" label="电桩类型：">
                <el-select v-model="searchContent.type" placeholder="请选择类型">
                    <el-option
                        v-for="item in pileType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="address" label="电桩地址：">
                <el-input v-model="searchContent.address" placeholder="电桩地址" maxlength="32"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight">
                <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
                <el-table-column prop="add_time" label="添加时间" min-width="160" align="center" #default="{ row }">
                    {{_dateFormatter(row.add_time)}}
                </el-table-column>
                <el-table-column prop="name" label="电桩名称" min-width="160" align="center"></el-table-column>
                <el-table-column prop="fast" label="快速充电 (数量)" min-width="120" align="center"></el-table-column>
                <el-table-column prop="slow" label="慢速充电 (数量)" min-width="120" align="center"></el-table-column>
                <el-table-column prop="tel" label="客服电话" min-width="160" align="center"></el-table-column>
                <el-table-column label="操作" min-width="140" align="center" #default="{row}">
                    <el-button type="primary" @click="handlePile(row)">编辑</el-button>
                    <el-button type="danger" @click="messageBox(row.id)">删除</el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <div class="btn-group">
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
        <PileDrawer :options="options" v-on:closeDrawer="closeDrawer" v-on:getData="getData"></PileDrawer>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import {dateFormatter} from "@/common/js/util";
import PileDrawer from './pile-drawer';
export default {
    props: ["showDrawer"],
    data() {
        return {
            searchContent: {
                name: null,           // 电桩名称
                type: '0',           // 电桩类型
				start_time: null,     // 添加开始时间
                end_time: null,       // 添加结束时间
				address: null,        // 电桩地址
                is_search: false      // 是否处于搜索
            },
			selectTime: '',           // 添加时间 [start, end]
            pileType: [
                {label: '全部 ', value: '0'},
                {label: '快充不为0 ', value: '1'},
				{label: '慢充不为0 ', value: '2'}
            ],
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 10,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
            oHeight: 600,             // 默认高度, 其值会在mounted中的resize进行重新计算
            options: {                 // 子组件抽屉参数
                visible: false,
                row: {}
            }
        }
    },
    computed: {
        getState() {
            return function(val) {
                return this.stateList.filter(item => item.value == val)[0].label;
            }
        }
    },
    components: { PileDrawer },
    methods: {
        handleChangeTime(val) {
            if(val) {
                this.searchContent.start_time = val[0] / 1000;
                this.searchContent.end_time = val[1] / 1000;
            } else {
                this.searchContent.start_time = null;
                this.searchContent.end_time = null;
            }
        },
        _dateFormatter(time) {
            return dateFormatter("YYYY-MM-DD HH:mm:ss", time * 1000)
        },
        async getData() {
            let datas = {
                limit: this.pageArr.pageSize,
                page: this.pageArr.curpage
            }
            if(this.searchContent.is_search) {
                datas = {...datas, ...this.searchContent};
            }
            const res = await this.$http.post('/admin/chargingPile/index.php?act=chargingPile&op=list', datas)
            if(res.code == 1) {
                this.dataList = res.data.list
                this.pageArr.total = parseInt(res.data.count)
            }
        },
        messageBox(id) {
            this.$confirm('确定删除该电桩信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.handleDelete(id);
            }).catch(() => {})
        },
        async handleDelete(id = 0) {
            // 删除
            if(!id) return;
            const res = await this.$http.get('/admin/chargingPile/index.php?act=chargingPile&op=del', { params: { id }})
            if(res.code == 1) {
                this.$message({
                    type: "success",
                    message: "删除成功"
                })
                this.getData();
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        handleSearch() {
            if(!this.searchContent.is_search) this.searchContent.is_search = true;
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleReset() {
            this.$refs.searchFrom.resetFields();
            this.selectTime = null
            if(!this.searchContent.is_search) return;
            this.searchContent = {
                is_search: false
            }
            this.pageArr.curpage = 1;
            this.getData();
        },
        handlePile(row = {}) {
            this.options.row =  { ...row };
            this.options.visible = true;
        },
        closeDrawer() {
            this.options.row = {}; // 这里不可为null, 否则 子组件无法监听 options.row
            this.options.visible = false;
            this.$emit("showDrawer")
        }
    },
    created() {
        this.$parent.showButton = true;
        this.getData()
    },
	mounted() {
		resize(this)
	},
	watch: {
        "showDrawer": {
            immediate: true,
            handler: function(val, oldVal){
                if(val) this.handlePile();
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    /deep/.search {
        &-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-label {
                font-size: 14px;
            }
            &-input {
                width: 200px;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
        }
    }
    /deep/.search-list {
        .input-sort input {
            width: 60px;
            text-align: center;
        }
    }
    /deep/.bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-bottom {
            background: #409EFF;
            color: #fff;
            border: 0;
            font-size: 14px;
            padding: 5px 8px;
            border-radius: 3px;
            display: inline-block;
        }
    }
    /deep/.image_path {
        width: 60px;
        height: 60px;
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: space-around;
    }
    /deep/.state1{
        color: #67C23A;
    }
    /deep/.state2{
        color: #999;
    }
}
</style>
